<template>
    <div class="main">
        <!-- <div class="header_box">
            <div class="header">
                <el-row>
                    <el-col :span="8">
                        <div class="title">
                            <span>{{user.userName}}的空间</span>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <div class="collocation clerFix">
                            <div class="county">
                                <span>中方县智慧云空间</span>
                            </div>
                            <div class="search">
                                <el-input placeholder="请输入关键词" v-model="input3" class="input-with-select">
                                    <el-button slot="append" icon="el-icon-search">搜索</el-button>
                                </el-input>
                            </div>
                            <div class="messge">
                                <el-badge is-dot class="item" @click.native="goMessage(user.userId)">消息</el-badge>
                            </div>
                            <div class="setup">
                                <el-dropdown>
                                    <span class="el-dropdown-link">设置</span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>主页装扮</el-dropdown-item>
                                        <el-dropdown-item>退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div> -->
        <Header></Header>
        <div class="content_box">
            <div class="content">
                <div class="current_page clearFix">
                    <span>当前位置：</span>
                    <div>
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>个人中心</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </div>

                <el-button type="primary" class="meBtn" size="small" @click="goMeSapce(userInfo)">我的主页</el-button>
                <el-row style="margin-top: 20px;">
                    <el-col :span="5">
                        <el-menu :default-active="isActive" class="el-menu-vertical-demo" @open="handleOpen"
                            @close="handleClose" background-color="#545c64" text-color="#fff"
                            active-text-color="#409EFF" :router="true">
                            <el-menu-item :index="'/personal/personalData'">
                                <span slot="title">个人资料</span>
                            </el-menu-item>
                            <el-menu-item :index="'/personal/updateAvatar'">
                                <span slot="title">修改头像</span>
                            </el-menu-item>
                            <el-menu-item :index="'/personal/updatePassword'">
                                <span slot="title">修改密码</span>
                            </el-menu-item>
                            <el-menu-item :index="'/personal/updateClass'" v-if="userInfo.role_id == 6 || userInfo.role_id == 8">
                                <span slot="title">我的班级</span>
                            </el-menu-item>
                            <el-menu-item :index="'/personal/relationParents'" v-if="userInfo.role_id == 6">
                                <span slot="title">关联家长</span>
                            </el-menu-item>
                            <el-menu-item :index="'/personal/relationChild'" v-if="userInfo.role_id == 9">
                                <span slot="title">关联孩子</span>
                            </el-menu-item>
                            <el-menu-item :index="'/personal/updateMechanism'"
                                v-if="userInfo.role_id != 6 && userInfo.role_id != 9 && userInfo.role_id != 8">
                                <span slot="title">机构信息</span>
                            </el-menu-item>
                            <!-- <el-menu-item :index="'/personal/updateMechanism'"
                                v-if="user.roleid != 6 && user.roleid != 9">
                                <span slot="title">机构信息</span>
                            </el-menu-item> -->

                            <el-divider></el-divider>

                            <el-menu-item :index="'/personal/accountSecurity'">
                                <span slot="title">账号安全</span>
                            </el-menu-item>
                            <el-menu-item :index="'/personal/updatePrivacy'">
                                <span slot="title">隐私设置</span>
                            </el-menu-item>

                            <el-divider></el-divider>

                            <el-menu-item :index="'/personal/spaceStatistics'">
                                <span slot="title">空间统计</span>
                            </el-menu-item>
                            <!-- <el-menu-item :index="'/personal/costumeRecord'">
                                <span slot="title">装扮记录</span>
                            </el-menu-item> -->
                        </el-menu>
                    </el-col>
                    <el-col :span="19">
                        <div class="tab_content">
                            <router-view></router-view>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import Footer from "@c/Footer/footer";
    import Header from "@c/Header/head";
    export default {
        computed: {
            ...mapState({
                userInfo: state => state.userModule.userInfo,
                user: state => state.userModule.user
            })
        },
        data() {
            return {
                typeId: this.$route.params.id,
                isActive: "/personal/personalData",
                input3: "",
                type: 1,
            };
        },
        components: {
            Footer,
            Header
        },
        methods: {
            // 个人空间
            goMeSapce(user) {
                 // 8教师，6学生，9家长，9527学校，1000班级，100011教研
                switch (user.role_id || user.roleid) {
                    case 6:
                    case 8:
                    case 9:
                        this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', user)
                        this.$router.push({
                            path: "/students",
                            query: user.id
                        });
                        break
                    case 7:
                        this.$store.commit('commonModule/INIT_ISMANAGER',true);
                        this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', user)
                        this.$router.push({
                            path: "/school/schoolHomePage",
                            query: {
                                others: user
                            }
                        });
                        break
                    case 1000:
                        this.$store.commit('commonModule/INIT_ISMANAGER',true);
                        this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', user)
                        this.$router.push({
                            path: "/class/classHomePage",
                            query: {
                                others: user
                            }
                        });
                        break
                    case 100011:
                        this.$store.commit('commonModule/INIT_ISMANAGER',true);
                        this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', user)
                        this.$router.push({
                            path: "/research/researchOther/researchOtherHome",
                            query: {
                                others: user
                            }
                        });
                        break
                    default:
                        this.$message.warning('请登录后重试')
                        break;
                }
            },
            // 消息
            goMessage(userId) {
                this.$router.push({
                    path: "/message",
                    query: userId
                });
            },
            handleOpen(key, keyPath) {
            },
            handleClose(key, keyPath) {
            },
            goPersonal() {
                let type = this.type;
                this.$router.push({
                    path: "/personal/" + type
                });
            }
        },
        created() {
            
        }
    };
</script>

<style lang="scss" scoped>
    .main {
        width: 100%;

        .header_box {
            width: 100%;

            .header {
                box-sizing: border-box;
                padding: 15px 0;
                margin: 0 auto;
                width: 81%;

                .title {
                    font-size: 24px;
                    color: rgb(64, 158, 255);
                    text-align: left;
                }

                .collocation>div {
                    float: left;
                }

                .collocation {
                    float: right;

                    .county {
                        color: rgb(64, 158, 255);
                        margin: 10px 50px 0 0;
                    }

                    .search {
                        width: 400px;
                    }

                    .messge {
                        cursor: pointer;
                        margin: 10px 50px 0 50px;
                    }

                    .setup {
                        margin-top: 10px;
                        cursor: pointer;
                    }
                }
            }
        }

        .content_box {
            width: 100%;
            // height: calc(100vh - 175px);
            background-color: white;

            .content {
                width: 81%;
                height: 100%;
                box-sizing: border-box;
                padding: 10px 0;
                margin: 0 auto;
                position: relative;

                .current_page {
                    text-align: left;
                    font-weight: 400;
                    color: #606266;
                    font-size: 14px;

                    span {
                        float: left;
                    }

                    &>div {
                        float: left;
                        margin-top: 3px;
                    }
                }

                .tabs_warp {
                    height: calc(100vh - 240px);
                    list-style-type: none;
                    background-color: #cceeff;
                    padding-inline-start: 0;
                    margin: 0;

                    .personal {
                        width: 100%;
                        box-sizing: border-box;
                        padding: 20px 0;
                        position: relative;
                        font-size: 18px;
                    }

                    .personal::before,
                    .personal::after {
                        content: "";
                        height: 2px;
                        width: 32%;
                        background-color: #aaaaaa;
                        position: absolute;
                        top: 32px;
                    }

                    .personal::before {
                        left: 0;
                    }

                    .personal::after {
                        right: 0;
                    }

                    .tab_item {
                        box-sizing: border-box;
                        padding: 10px 0;

                        .link {
                            display: inline-block;
                            width: 100%;
                            height: 100%;
                            text-decoration: none;
                            color: #000;
                        }
                    }

                    .tab_item.active {
                        border-bottom: 2px solid #00dd00;
                    }
                }

                .tab_content {
                    width: 100%;
                    height: calc(100vh - 240px);
                    box-sizing: border-box;
                    padding: 0 0 0 10px;
                }

                .meBtn {
                    position: absolute;
                    right: 0;
                    top: 10px;
                }
            }
        }

        .clearFix::after {
            content: "";
            display: block;
            width: 100%;
            font-size: 0;
            clear: both;
        }
    }
</style>